<template>
  <div id="pages">
    <div class="header pagehold"  >
      <img class="header_img" src="../../../static/img/组 6.png">
    </div>
    <div class="aa">
      <div class="bb" style="width: 1200px">
      <el-menu   background-color='rgb(71,155,172)' text-color="#fff"  class="el-menu-demo pagehold" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">精选/发现</el-menu-item>
        <el-submenu index="2">
          <template slot="title">标本模型</template>
          <el-menu-item index="2-1">选项1</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
          <el-menu-item index="2-3">选项3</el-menu-item>
          <el-submenu index="2-4">
            <template slot="title">选项4</template>
            <el-menu-item index="2-4-1">选项1</el-menu-item>
            <el-menu-item index="2-4-2">选项2</el-menu-item>
            <el-menu-item index="2-4-3">选项3</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-menu-item index="3" >医学资料</el-menu-item>
        <el-menu-item index="4" >VR实验室</el-menu-item>
        <el-menu-item index="5" >咨询中心</el-menu-item>
        <el-menu-item index="6" >AboutUs</el-menu-item>
      </el-menu>
      <!--   搜索框     -->
<!--        <el-input id="search" v-model="input"  placeholder="请输入关键词搜索">-->
<!--          <el-button class="search" slot="append" type="gone" ><i  class="el-icon-search" style="color: red "-->
<!--          /></el-button>-->
<!--        </el-input>-->
        <input type="text" placeholder="请输入内容" class="searchinput"/>
        <button class="searchbutton"><img src="/static/img/搜索拷贝 3.png"/></button>
      <!--   登录     -->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item style="color: white">登录</el-breadcrumb-item>
          <el-breadcrumb-item style="color: white">注册</el-breadcrumb-item>
        </el-breadcrumb>
      <!--   个人中心     -->
        <el-button type="admin"  style="border-radius:50% ">
          <img class="admin_img" src="static/img/个人 拷贝.png">
        </el-button>
      </div>

    </div>

  </div>
</template>

<script>
  export default {
    name: "home",
    data(){
      return{
        input:""
      }
    },
    methods:{
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

<style scoped>
  .searchbutton{
    width: 69px;
    height: 38px;
    background: #479BAC;
    border-radius: 19px;
    position: absolute;
    left: 926px;
    top: 25px;
    border: none;
  }
  .searchinput{
    width: 311px;
    height: 46px;
    background: #FFFFFF;
    border-radius: 23px;
    outline: none;
    border: none;
    padding: 0 20px;
    margin-bottom: 54px;
    vertical-align: middle;
  }
  .el-breadcrumb  /deep/  .el-breadcrumb__inner{
    color: white !important;
  }
  .el-breadcrumb  /deep/  .el-breadcrumb__separator{
    color: white !important;
  }
  .bb .el-input #search{
    height: 46px;
    width: 46px;
  }

  .el-breadcrumb{
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    color: white;
    margin-bottom: 81px;
    margin-top: 25px;
    margin-left: 36px;
  }
  .el-breadcrumb{
    color: white;

  }
  .admin_img{
    vertical-align: middle;
    margin-top: -11px;
    margin-left: -2px;
  }
  .el-button[data-v-17d3ad7d]{
    width: 36px;
    height: 36px;
  }
  .el-menu--horizontal>.el-submenu .el-submenu__title {
    color: #fff;
    font-size: 20px;
  }
  .el-menu--horizontal{
    border-bottom: none;
  }
  .el-menu-demo{
    width: 685px !important;
  }
  .header{
    height: 88px;
    text-align: center;
  }
  .el-icon-search{
    width: 20px;
    height: 20px;
  }
  .bb .el-input--medium .el-input__inner{
    width: 46px;
    height: 46px;
  }
  .search{
    width: 69px;
    height: 38px;
    /*background: #479BAC;*/
    border-radius: 19px;
  }
  .el-button{
    width: 69px;
    height: 38px;
    /*background: #479BAC;*/
    border-radius: 19px;
  }
  .bb{
    width: 1200px;
    margin: 0 auto;
    height: 90px;
    position: relative;
  }
  .el-button--medium{
    padding: 10px 0px !important;
  }

  .aa{
    width: 100%;
    height: 90px !important;
    background-color: rgb(71,155,172);
    overflow: hidden;
  }
  .el-menu-demo{
    margin-left: 359px;
  }
  #pages{
    width: 100%;
    margin: 0 auto;
  }
  .pagehold{
    width: 1200px;
    margin: 0 auto;
  }
  .header_img{
    margin-top: 14px;
  }
  .el-menu--horizontal>.el-menu-item{
    font-size: 16px;
  }
  #search{
    width: 311px;
    height: 38px;
    background: #479BAC!important;
    border-radius: 19px;
  }
  .el-button--primary {
    color: #fff;
    /*background-color: #FC813B;*/
    /*border-color: #FC813B;*/
  }
  .el-button--admin {
    color: #fff;
    background-color: rgb(232,246,245);
    margin-bottom: 20px;
  }
  .nav{
    height: 90px;
    width: 1920px;
    background-color: rgb(71,155,172);
  }
  .el-menu-demo{
    margin-top: 15px;
  }
  .el-button--goon {
    color: #FFF;
    background-color: #20B2AA;
    border-color: #20B2AA;
  }
  .el-input {
    width: 311px;
    height: 46px;
    line-height: 46px;
    background: #FFFFFF;
    border-radius: 23px;
    vertical-align: middle;
    margin-bottom: 47px;
    border: none;
  }
  .el-button--admin{
    vertical-align: middle;
    margin-bottom: 53px;
    margin-left: 21px;
  }
  .el-menu{
    display: inline-block;
  }
</style>
